import React, { Component } from 'react'
// import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';
import { getBalanceOption} from '../../../echarts-figures.js';

var echarts = require('echarts');

@DataBinder({
  lineChartData: {
    url: `${global.constants.GOLDEYEGETHOST}cattle/marge_trading`,
    type: 'get',
    params: {
    },
    defaultBindingData: {}
  },
})
export default class LineChart extends Component {

  static propTypes = {
    // secu_code: PropTypes.string.isRequired,
    // type: PropTypes.string,
  };
  
  constructor(props) {
    super(props);
    this.state = {
        chartName:'BalanceChart', // 融资余额图表
        schartName:'SecondChart',
        message: true,
        numbers: {},
        snumbers: {},
        desc_info:'',
        msg:''
    }
  }
  initChart(config,id) {
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if( myChart === undefined){
        myChart = echarts.init(document.getElementById(id));
    }
    myChart.setOption(config);
    window.addEventListener('resize',function(){
      myChart.resize();
    })
  }

  getFinanceValue = (data) => {
    let datas = [];
    data.map((item,index) => {
      datas.push(Number(item.FinanceValue))
    })
    return datas
  }

  getFinanceDate = (date) => {
    let dates = [];
    date.map((item,index) => {
      dates.push(item.time)
    })
    return dates
  }

  getPerDate = (value) => {
    let values = [];
    value.map((item,index) => {
      values.push(item.procent*100)
    })
    return values
  }

  getSecurityVolumeData = (data) => {
    let datas = [];
    data.map((item,index) => {
      datas.push(Number(item.SecurityVolume))
    })
    return datas
  }

  getSecurityVolumeDate = (date) => {
    let dates = [];
    date.map((item,index) => {
      dates.push(item.time)
    })
    return dates
  }

  show = (content) => {
    Toast.show({
      type: "error",
      content: content,
      afterClose: () => console.log("")
    });
  };

  componentDidMount() {
    this.props.updateBindingData('lineChartData',{
      params: {
        secu_code:GetUrlParam("secu_code"),
      }
    }, (data) => {
      // console.log('Linedata',data)
      if(data && data.flag){
        this.setState({
          // 融资余额
          numbers:getBalanceOption(
            '融资融券余额',
            this.getFinanceValue(data.data.FinanceValue),
            this.getFinanceDate(data.data.FinanceValue),
          ),
          // snumbers:getRLOption(
          //   '融资融券',
          //   this.getSecurityVolumeData(data.data.SecurityVolume),
          //   this.getSecurityVolumeDate(data.data.SecurityVolume),
          //   '',
          // ),
        });
        // 
        this.initChart(this.state.numbers,this.state.chartName);
        // this.initChart(this.state.snumbers,this.state.schartName);
      }else{
        this.setState({
          // message: false,
          msg: data && data.msg || '暂无数据'
        })
      }
    });
  }
  
  render() {
    return (
      <div style={{margin:'30px'}}>
          <div id={this.state.chartName} style={{width: "100%", height: '360px',marginTop:'30px'}}>
            <p style={{textAlign:'center',lineHeight:'320px',fontSize:'24px'}}>{this.state.msg}</p>
          </div>
          {/*this.state.message && <div id={this.state.schartName} style={{width: "100%", height: '360px'}}></div>*/}
      </div>
    )
  }
}
